{% block bramble %}
    <style>
        /*
        * Initial loading spinner css, inlined so we don't block loading.
        * Spinner is based on https://github.com/tobiasahlin/SpinKit (MIT)
        */
        #spinner-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            background: #0b4326;
            opacity: 1;
            background: rgba(11,67,38,.9);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        #spinner-container h2 {
            color: white;
            font-size: 20px;
            margin: 0 0 5px 0;
        }

        #spinner-container .message {
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,.6);
        }

        #spinner-container .error-message {
            display: none;
        }

        #spinner-container.loading-error .error-message {
            display: block;
        }

        #spinner-container a {
            color: white;
            text-decoration: underline;
        }

        #spinner-container .thimble-spinner {
            width: 50px;
            height: 50px;
            background: url(/img/thimble-icon.svg);
            background-position: center;
            background-size: 100%;
            animation: spinner 2s infinite ease-in-out;
            outline: 1px solid transparent;
            margin: 0 auto 15px auto;
        }

        #spinner-container.loading-error {
            background: black;
        }

        #spinner-container.loading-error .loading-message {
            display: none;
        }

        #spinner-container.loading-error .thimble-spinner {
            animation: none;
        }

        #spinner-container .loading-message-help-link {
            animation: none;
        }

        #spinner-container button {
          background: white;
          color: black;
          margin: 0 auto;
          opacity: 1;
          border: none;
          margin: 15px auto 0 auto;
          display: block;
          outline: none;
          padding: 8px 14px;
          border-radius: 2px;
          cursor: pointer;
          border: solid 2px white;
          background: transparent;
          color: white;
        }

        #spinner-container .reload-message {
          margin-bottom: 30px;
        }

        #spinner-container button:hover {
          background: rgba(255,255,255,.2);
        }

        #spinner-container button:active {
          background: white;
          color: black;
        }

        @keyframes spinner {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            25% {
                transform: rotateX(-180.1deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(-180deg) rotateY(-179.9deg);
            }
            75% {
                transform: rotateX(-360deg) rotateY(-179.9deg);
            }
            100% {
                transform: rotateX(-360deg) rotateY(-360deg);
            }
        }

        #spinner-container .taking-too-long {
          max-height: 0;
          opacity: 0;
          overflow: hidden;
          padding-top: 30px;
          transition: max-height 1s ease-out 0s, opacity 1s ease-out .25s;
          margin: 0 auto;
        }

        #spinner-container .taking-too-long p {
            margin: 0 0 10px 0;
        }

        #spinner-container .taking-too-long p.email-us {
            margin: 50px 0 0 0;
        }


        #spinner-container .taking-too-long.visible {
          max-height: 400px;
          opacity: 1;
        }

        #spinner-container .important-notice {
          position: absolute;
          top: 20px;
          background: black;
          color: rgba(255,255,255,.6);
          padding: 20px 20px 12px 20px;
          max-width: 80%;
          font-size: 15px;
        }

        #spinner-container .important-notice h2 {
          color: rgba(255,255,255,.9);
          font-size: 18px;
        }

        </style>

    <div id="spinner-container">

        <!-- Commenting out in case we need it again

        <div class="important-notice">
          <h2>We are having some problems right now.</h2>
          <p>
            If you are reading this, there is a chance that your project will load very slowly or not at all.
            We are aware of the issue and are working to fix it as fast as we can.
          </p>
          <p>If possible, give the editor extra time to load, or try again in a few minutes.</p>
        </div>
        -->

        <div class="thimble-spinner"></div>
        <div class="loading-message message">
            <h2>{{ gettext("loadingProject") }}</h2>
            <div class="taking-too-long">
                <p>
                  {{ gettext("projectNotLoadingMessage") | safe }}
                </p>
                <p>
                  <button class="refresh-browser">{{ gettext("tryAgainButtonLabel") }}</button>
                </p>
                <p class="email-us">
                  {{ gettext("emailForHelp") | safe }}
                </p>
            </div>
        </div>

        <div class="error-message message">
            <h2>
              {{ gettext("errorCouldNotStart") }}
            </h2>
            <p class="reload-message">
              {{ gettext("reloadThimbleMessage") | safe }}
            </p>
            <p>{{ gettext("errorLoadingProjectBramble") }}</p>
            <p>{{ gettext("errorLoadingProjectSuggestion") }}</p>
        </div>
    </div>

    <div class="bramble-toolbar">
        {% include './nav-options.html' %}
        <div class="dialog-overlay"></div>
    </div>
    <div id="webmaker-bramble"></div>
    <script src="{{ editorHOST }}/dist/bramble.js"></script>
    <script id="thimble-script"
            src="/editor/scripts/main.js"
            data-project-details="{{ projectMetadata }}"
            data-editor-host="{{ editorHOST }}"
            data-editor-url="{{ editorURL }}"
            data-app-url="{{ appURL }}/{{ locale }}">
    </script>
{% endblock %}
